import { PageContainer } from '@ant-design/pro-layout';
import { useEffect } from 'react';
import { useLocation } from 'umi';
import React, { useState } from 'react';
import ProCard from '@ant-design/pro-card';
const { Divider } = ProCard;
import RcResizeObserver from 'rc-resize-observer';
import { Button, Statistic, Modal, Tag, Space } from 'antd';
import { Avatar } from 'antd';
import InserComponent from './components/InserComponent';
import { request } from 'umi';
import ProList from '@ant-design/pro-list';
import { api } from '@/global';

type ClassesInfoType = {
  id: number;
  className: string;
  classYear: string;
  deptName: string;
  professionalName: string;
  userNumber: number;
};

type ClassesUserInfo = {
  id: string;
  name: string;
  portrait: string;
};

const dataSource = [
  {
    name: '语雀的天空',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
  {
    name: 'Ant Design',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
  {
    name: '蚂蚁金服体验科技',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
  {
    name: 'TechUI',
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    desc: '我是一条测试的描述',
  },
];

export default () => {
  const paramas = useLocation();
  const [classesInfo, SetClassesInfo] = useState<ClassesInfoType>();

  const [visible, SetVisible] = useState(false);
  const [delteInfo, SetDeleteInfo] = useState([]);
  const [classUserInfo, setClassUserInfo] = useState<ClassesUserInfo[]>();

  // 获取页面信息
  const getBaseInfo = async () => {
    const id = paramas?.query?.classId;
    const classesUserResult = await request(api.getClassesIntoUserInfo, {
      params: {
        id,
      },
    });
    const classResult = await request(api.getDetailedClassesIngo, {
      params: {
        id,
      },
    });

    SetClassesInfo(classResult.data);
    setClassUserInfo(classesUserResult.data);
  };
  useEffect(() => {
    getBaseInfo();
  }, []);

  const handleOk = () => {
    request(api.removeClasses, {
      method: 'POST',
      data: {
        id: delteInfo[0],
      },
    }).then((item) => {
      SetVisible(false);
      getBaseInfo();
    });
  };
  const handleCancel = () => {
    SetVisible(false);
  };

  const [responsive, setResponsive] = useState(false);
  return (
    <PageContainer
      waterMarkProps={{
        content: '山西工程技术学院',
      }}
      header={{
        title: '班级管理',
        breadcrumb: {
          routes: [
            {
              path: '',
              breadcrumbName: '组织管理',
            },
            {
              path: '',
              breadcrumbName: '班级管理',
            },
            {
              path: '',
              breadcrumbName: '班级信息',
            },
          ],
        },
      }}
    >
      <RcResizeObserver.Collection key="resize-observer">
        <RcResizeObserver
          onResize={(offset) => {
            setResponsive(offset.width < 450);
          }}
        >
          <ProCard.Group title="基本信息" direction={responsive ? 'column' : 'row'}>
            <ProCard>
              <Statistic title="班级姓名" value={classesInfo?.className} precision={2} />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="年级" value={classesInfo?.classYear + '级'} />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="所属专业" value={classesInfo?.professionalName} />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="所属系部" value={classesInfo?.deptName} />
            </ProCard>
          </ProCard.Group>
        </RcResizeObserver>
        {/* <RcResizeObserver>
          <ProCard.Group
            style={{ marginTop: '16px' }}
            title="核心信息"
            direction={responsive ? 'column' : 'row'}
          >
            <ProCard>
              <Statistic title="班级人数" value={classesInfo?.userNumber} />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="课程量" value={132} precision={2} />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="文档提交次数" value={93} suffix="/ 100" />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="作业完成率" value={112893.0} />
            </ProCard>
          </ProCard.Group>
        </RcResizeObserver> */}
        <ProCard.Group
          title="学生列表"
          style={{ marginTop: '16px' }}
          wrap
          tooltip="点击删除"
          actions={[
            <InserComponent key="1" getBaseInfo={getBaseInfo} id={paramas?.query?.classId} />,
          ]}
        >
          {classUserInfo &&
            classUserInfo.map((item) => {
              return (
                <ProCard
                  key={item.id}
                  colSpan={{ xs: 10, sm: 8, md: 6, lg: 4, xl: 3 }}
                  headerBordered
                  hoverable
                  bordered
                  onClick={() => {
                    SetDeleteInfo([item?.id, item?.name]);
                    SetVisible(true);
                  }}
                >
                  <div
                    style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
                  >
                    <Avatar
                      size="large"
                      icon="user"
                      src={item.portrait}
                      shape="square"
                      style={{ margin: ' 0 auto' }}
                    />
                    <div style={{ margin: ' 0 auto', marginTop: '9px' }}>
                      <span>{item.name}</span>
                    </div>
                  </div>
                </ProCard>
              );
            })}
        </ProCard.Group>

        <ProCard.Group
          title="课程列表"
          style={{ marginTop: '16px' }}
          wrap
          tooltip="修改信息请去课程模块修改"
        >
          <ProList<any>
            rowKey="name"
            request={async () => {
              const id = paramas?.query?.classId;
              const result = await request(api.getCourseList, {
                params: {
                  classId: id,
                },
              });

              console.log(result);

              return result;
            }}
            showActions="hover"
            showExtra="hover"
            metas={{
              title: {
                dataIndex: 'courseName',
              },
              avatar: {
                dataIndex: 'image',
                render: (_, row) => {
                  return (
                    <Avatar
                      size={'small'}
                      src="https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg"
                    ></Avatar>
                  );
                },
              },
              description: {
                dataIndex: 'desc',
              },
              subTitle: {
                render: (_, row) => {
                  let tag;

                  if (row.courseStatu === 1) {
                    tag = <Tag color="#3498db">正在进行</Tag>;
                  } else if (row.courseStatu === 2) {
                    tag = <Tag color="#a4b0be">已经节课</Tag>;
                  } else {
                    tag = <Tag color="#2ecc71">其他</Tag>;
                  }
                  return (
                    <Space size={1}>
                      <Tag color="blue">{row.teachName}</Tag>
                      {tag}
                    </Space>
                  );
                },
              },
              actions: {
                render: (text, row) => [],
              },
            }}
          />
        </ProCard.Group>
      </RcResizeObserver.Collection>

      <Modal
        title="删除班级成员"
        mask={true}
        maskClosable={true}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        是否移除&nbsp;&nbsp;
        <span style={{ fontWeight: 900, fontSize: 25, color: '#3498db' }}>{delteInfo[1]}</span>
        &nbsp;&nbsp; 用户
      </Modal>
    </PageContainer>
  );
};
